The ::marker pseudo-element is used to style the marker box of list items, such as bullets in unordered lists or numbers in ordered lists. It allows you to customize the appearance of list markers without altering the HTML content.

Key Points

1
::marker targets only the marker portion of <li> elements, not the content text.
2
You can style properties like color, font-size, font-weight, and content for the marker.
3
Other CSS properties, like margin or padding, generally do not apply to ::marker.
4
Useful for customizing bullets, numbers, or symbols in lists to match design aesthetics.

Example: Styling List Markers

In this example, the ::marker pseudo-element changes the bullet color to red, increases its size, and replaces the default bullet with a star symbol. This is all achieved without modifying the HTML structure of the list.

Best Practices

1
Use ::marker for purely visual customization of list markers.
2
Avoid adding essential content in markers that users need to read, as screen readers may treat them differently.
3
Combine with relative units or em for scalable and responsive marker styling.
4
Test across browsers, as some older browsers may have limited support for ::marker styling.

Difficulty: 3/10

Topics: ::marker pseudo-element, list styling, CSS custom properties

Scenario Questions

0-2 years experience

1
How would you change the color of bullet points in an unordered list to red using CSS?
2
What happens if you try to set font-size on ::marker but the list item has no explicit font-size defined?
3
You’re told the bullets in a list aren’t showing up — what CSS property might be accidentally set to none?

2-5 years experience

1
A designer wants custom checkmark icons instead of bullets in a todo list — how would you implement that with ::marker, and what fallbacks would you consider for older browsers?
2
Our list indicators are misaligned after adding a custom font — what debugging steps would you take to fix ::marker positioning?
3
Why did our ::marker styles stop working after we switched from ul/li to a div-based component with aria-role?

5-8 years experience

1
We’re building a scalable component library with customizable list indicators — how would you design the CSS architecture to support theme-driven ::marker styles without bloating the stylesheet?
2
In a high-performance UI with hundreds of dynamic lists, how would you evaluate whether ::marker styling impacts layout reflow or paint performance compared to using pseudo-elements on li?
3
How would you handle ::marker styling in a system that supports RTL languages and needs to flip marker positions automatically?

8+ years experience

1
We’re migrating a legacy product from list-style-image to ::marker — what cross-browser compatibility risks and accessibility implications must you coordinate across design, engineering, and QA teams?
2
How would you architect a CSS strategy for ::marker that supports both modern browsers and legacy enterprise systems without forcing a full CSS reset or polyfill?
3
A global design system uses ::marker for hierarchical indicators across 12 product teams — how do you ensure consistency, performance, and maintainability at scale without creating a CSS monolith?

Follow-up Questions

❓Can you style ::marker with background images?
❓What happens if you apply display: none to ::marker?
❓How does ::marker behave in nested lists?